<template>
    <!-- 搜索 -->
    <div class="search-box">
        <div class="flex">
            <div>
                <el-icon>
                    <Search />
                </el-icon><span>筛选搜索</span>
            </div>
            <div>
                <el-button @click="resetForm">重置</el-button>
                <el-button type="primary" @click="search">查询搜索</el-button>
            </div>
        </div>
        <div style="padding-top: 20px">
            <!-- 在input里面回车会造成刷新，大家今晚可以尝试解决一下 -->
            <!--  如果希望阻止这一默认行为，可以在 <el-form> 标签上添加 @submit.prevent。 -->
            <!-- model  表单数据对象 -->
            <el-form ref="searchFormRef" :model="listParams">
                <el-form-item prop="keyword" label="优惠卷名称：" label-width="120px">
                    <el-input v-model="listParams.name" size="large" :input-style="{ width: 200 + 'px' }"
                        placeholder="优惠卷名称">
                    </el-input>
                    <span :style="{ marginLeft: 100 + 'px', marginRight: 20 + 'px' }">优惠卷类型：</span>
                    <el-select v-model="listParams.type" class="m-2" placeholder="全部" size="large">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <!-- 添加用户按钮 -->
    <div class="add-box">
        <div>
            <el-icon>
                <Tickets />
            </el-icon>数据列表
        </div>
        <div>
            <el-button @click="router.push('/sms/addCoupon')">添加</el-button>
        </div>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="id" type="selection">
        </el-table-column>
        <el-table-column prop="id" label="编号" width="80" />
        <el-table-column prop="name" label="优惠卷名称" />
        <el-table-column prop="type" label="优惠卷类型">
            <template #default="scope">
                {{ filterType(scope.row.platform) }}
            </template>
        </el-table-column>
        <el-table-column prop="useType" label="可使用商品">
            <template #default="scope">
                {{ filterUseType(scope.row.useType) }}
            </template>
        </el-table-column>
        <el-table-column prop="minPoint" label="使用门槛">
            <template #default="scope">
                满 {{ scope.row.minPoint }} 元可用
            </template>
        </el-table-column>
        <el-table-column prop="amount" label="面值">
            <template #default="scope">
                {{ scope.row.amount }} 元
            </template>
        </el-table-column>
        <el-table-column prop="platform" label="使用平台">
            <template #default="scope">
                {{ filterPlatform(scope.row.platform) }}
            </template>
        </el-table-column>
        <el-table-column prop="startTime" label="有效期" width="180">
            <template #default="scope">
                {{ fomatDate(scope.row.startTime) }} 至 {{ fomatDate(scope.row.endTime) }}
            </template>
        </el-table-column>
        <el-table-column prop="enableTime" label="状态">
            <template #default="scope">
                已过期
            </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
            <template #default="scope">
                <el-button type="primary" link>查看</el-button>
                <el-button type="primary" link>编辑</el-button>
                <el-button type="primary" link @click="remove(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <ElConfigProvider :locale="zhCn">
        <el-pagination background layout="total, sizes, prev, pager, next ,jumper" :total="pageTotal"
            v-model:currentPage="listParams.pageNum" @update:current-page="changePageNum"
            @update:page-size="changePageSize" :page-sizes="[5, 10, 15]" />
    </ElConfigProvider>
</template>


<script setup lang='ts'>
import { marketing } from "@/api";
import { reactive, ref, toRefs } from "vue";
import { fomatDate } from "@/utils"
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { ElConfigProvider, ElMessage, ElMessageBox } from "element-plus";
import { Tickets } from '@element-plus/icons-vue'
import { useRouter } from "vue-router"

const options = [
    {
        value: '0',
        label: '全场赠卷',
    },
    {
        value: '1',
        label: '会员赠卷',
    },
    {
        value: '2',
        label: '购物赠卷',
    },
    {
        value: '3',
        label: '注册赠卷',
    },
]

interface IState {
    listParams: IGetCouponListParams,
    tableData: ICouponList[],
    pageTotal: number
}

const state: IState = reactive({
    listParams: {
        name: "",
        pageNum: 1,
        pageSize: 10,
        type: ""
    },
    tableData: [],
    pageTotal: 0
})

const searchFormRef = ref()
const router = useRouter()

const getCouponList = () => {
    marketing.getCouponListApi(state.listParams).then(res => {
        if (res.code === 200) {
            console.log(res.data);
            state.tableData = res.data.list
            state.pageTotal = res.data.total
        }
    })
}

getCouponList()

const filterType = (num: number) => {
    if (num === 0) {
        return "全场赠卷"
    } else if (num === 1) {
        return "会员赠卷"
    } else if (num === 2) {
        return "购物赠卷"
    } else if (num === 3) {
        return "注册赠卷"
    }
}

const filterPlatform = (num: number) => {
    if (num === 0) {
        return "全平台"
    } else if (num === 1) {
        return "移动平台"
    } else if (num === 2) {
        return "PC平台"
    }
}

const filterUseType = (num: number) => {
    if (num === 0) {
        return "全场通用"
    } else if (num === 1) {
        return "指定分类"
    } else if (num === 2) {
        return "指定商品"
    }
}

const changePageNum = (val: number) => {
    // console.log(val);
    state.listParams.pageNum = val
    getCouponList()
}

const changePageSize = (val: number) => {
    // console.log(val);
    state.listParams.pageSize = val
    getCouponList()
}

const search = () => {
    getCouponList()
}

const resetForm = () => {
    // console.log('重置');
    // 获取到form 表单的组件实例
    // resetField   对该表单项进行重置，将其值重置为初始值并移除校验结果
    state.listParams.type = ""
    state.listParams.name = ""
    getCouponList();
}

const remove = (id: number) => {
    ElMessageBox.confirm(
        '是否要删除该活动',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        marketing.removeCouponApi(id).then(res => {
            if (res.code === 200) {
                ElMessage.success("删除成功")
                getCouponList()
            }
        })
    }).catch(() => {
    })
}

const toAddCoupon = () => {
    router.push("/sms/addCoupon")
}

const { listParams, tableData, pageTotal } = toRefs(state)
</script>
<style lang="less" scoped>
.search-box {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;

    .flex {
        display: flex;
        justify-content: space-between;
    }
}

.add-box {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0 0 4px 2px #ccc;
}
</style>